<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>霍尔效应测距</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            background: #f5f5f5;
            font-size: 16px
        }

        .row {
            display: flex
        }
        /* 等高 */
        .card {
            height: 100%;
            min-height: 520px;
            border-radius: 12px
        }

        .card-header {
            font-size: 1.25rem
        }

        .card-body {
            display: flex;
            flex-direction: column
        }

        .chart-container {
            flex: 1 1 auto;
            min-height: 380px;
            margin-top: 10px
        }
    </style>
</head>
<body>
    <div class="container-fluid mt-4">
        <div class="row g-4">
            <!-- 左侧卡片 -->
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">① 电压-距离分析</h5>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <input type="file" id="file" accept=".xlsx" class="form-control mb-2">
                        <button onclick="uploadFile()" class="btn btn-primary mb-2">上传数据</button>
                        <input type="number" id="voltageInput" placeholder="输入电压 (mV)" class="form-control mb-2">
                        <button onclick="predictDistance()" class="btn btn-outline-primary mb-2">预测距离</button>
                        <p id="resultText" class="fw-bold mb-2"></p>
                        <div class="chart-container flex-fill">
                            <canvas id="dataChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧卡片 -->
            <div class="col-md-6">
                <div class="card shadow-sm">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">② 磁场-距离分析</h5>
                    </div>
                    <div class="card-body d-flex flex-column">
                        <input type="number" id="khInput" placeholder="霍尔灵敏度 KH (mV/mA/T)" class="form-control mb-2">
                        <input type="number" id="currentInput" placeholder="激励电流 I (mA)" class="form-control mb-2">
                        <button onclick="calculateBField()" class="btn btn-success mb-2">计算磁场</button>
                        <div class="chart-container flex-fill">
                            <canvas id="bFieldChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let dataChart, bFieldChart, uploadedData = null;

        /* ——— 左侧 ——— */
        async function uploadFile() {
            const file = document.getElementById('file').files[0];
            if (!file) { alert('请选择文件'); return; }
            const formData = new FormData(); formData.append('file', file);
            const res = await fetch('/upload', { method: 'POST', body: formData });
            const data = await res.json();
            if (data.error) { alert(data.error); return; }
            uploadedData = data;
            drawLeftChart();
        }
        function drawLeftChart() {
            if (dataChart) dataChart.destroy();
            const ctx = document.getElementById('dataChart');
            const vMin = Math.min(...uploadedData.voltages);
            const vMax = Math.max(...uploadedData.voltages);
            const line = [{ x: vMin, y: uploadedData.slope * vMin + uploadedData.intercept },
            { x: vMax, y: uploadedData.slope * vMax + uploadedData.intercept }];
            dataChart = new Chart(ctx, {
                type: 'scatter',
                data: {
                    datasets: [
                        {
                            label: '原始数据', data: uploadedData.voltages.map((v, i) => ({ x: v, y: uploadedData.distances[i] })),
                            backgroundColor: 'rgba(0,123,255,0.8)'
                        },
                        {
                            label: '回归线', data: line, type: 'line', borderColor: 'rgba(220,53,69,0.9)',
                            borderWidth: 2, pointRadius: 0, fill: false
                        }
                    ]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    scales: { x: { title: { text: '电压 (mV)' } }, y: { title: { text: '距离 (mm)' } } }
                }
            });
        }
        async function predictDistance() {
            const v = parseFloat(document.getElementById('voltageInput').value);
            if (!uploadedData) { alert('请先上传数据'); return; }
            if (isNaN(v)) { alert('请输入数字'); return; }
            const d = uploadedData.slope * v + uploadedData.intercept;
            document.getElementById('resultText').textContent = `预测距离: ${d.toFixed(2)} mm`;
        }

        /* ——— 右侧 ——— */
        async function calculateBField() {
            if (!uploadedData) { alert('请先上传数据'); return; }
            const kh = parseFloat(document.getElementById('khInput').value);
            const cur = parseFloat(document.getElementById('currentInput').value);
            if (isNaN(kh) || isNaN(cur) || kh === 0 || cur === 0) { alert('请输入有效的 KH 与 I'); return; }
            const bFields = uploadedData.voltages.map(v => v / (kh * cur));
            if (bFieldChart) bFieldChart.destroy();
            const ctx = document.getElementById('bFieldChart');
            bFieldChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: uploadedData.distances,
                    datasets: [{ label: '磁场 B (T)', data: bFields, borderColor: 'rgba(40,167,69,0.9)', fill: false }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    scales: { x: { title: { text: '距离 (mm)' } }, y: { title: { text: '磁场 B (T)' } } }
                }
            });
        }
    </script>
</body>
</html>